<template>
  <div id="app">
    <div class="c3div1">
        <img src="../../../public/img/xuan1.gif" alt="" class="c3img1">
        <!-- <li>剧场春节合家欢，门票5折起></li> -->
        <van-swipe vertical class="li" :autoplay="3000" :show-indicators="false">
            <van-swipe-item v-for="shus in shu" :key="shus.id" class="swipe">{{shus.text}}</van-swipe-item>
        </van-swipe>
        <img src="../../../public/img/xuan2.gif" alt="" class="c3img2">
    </div>
    <div class="c3div2">
        <img :src="shi.img">
        <div class="c3div2-con">
            <li class="c3d2con1">{{shi.name}}...</li>
            <li class="c3d2con2">人气爆棚</li>
            <li class="c3d2con3">
                <span>￥{{shi.price}}</span>起
            </li>
            <li class="c3d2con4">去抢票</li>
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Daohangtu',
  data(){
      return {
          shu:[],
          shi:[]
      }
  },
  methods:{
    getbooks(){  
        return axios.get('/xuanchuan');
    },
    getreaders(){  
        return axios.get('/shili'); 
    }
  },
  created(){
    axios.all([this.getbooks(),this.getreaders()]).then(
        axios.spread((xuanchuan,shili)=> {
            this.shu = xuanchuan.data;
            // console.log("shili.data",shili.data);
            this.shi = shili.data;
            // console.log("this.shi",this.shi)
        })
    );
    // axios({
    //     url:"/xuanchuan"
    // }).then(res=>{
    //     this.shu = res.data;
    //     // this.$nextTick(()=>{})
    // })
  }
}
</script>

<style scoped>
.swipe{
    height: 0.046875rem;
    overflow: hidden;
}
#app{
    margin-left: 50%;
    transform: translate(-50%,0);
    width: 2.6rem;
    height: 1.1rem;
    border-radius: 0.05rem;
    border: 1px solid #e1e1e1;
    box-shadow: black 0 0 0.04rem;
    box-sizing: border-box;
    padding: 0.08rem 0.065rem;
}
.c3div1{
    width: 100%;height: 0.17rem;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    align-items:center;
    font-size: 0.075rem;
}
.c3div1 .li{
    width: 39.4225rem;
    height: 0.17rem;
}
.c3img1{
    width: 0.72rem;
}
.c3img2{
    width: 0.05rem;
}
.c3div2{
    box-sizing: border-box;
    padding: 0.05px 0;
    height: 0.73rem;
    width: 100%;
    display: flex;
    align-items:center;
}
.c3div2 img{
    width: 0.5rem;
    margin-right: 0.075rem;
    margin-top: 0.13rem;
}
.c3div2-con{
    width: 1.835rem;
    height: 0.49rem;
    position: relative;
}
.c3d2con1{
    font-size: 0.1rem;
    height: 0.30rem;
    padding: 0 0 0.03rem 0;
}
.c3d2con2{
    font-size: 0.075rem;
    color: #9c9ca4;
    padding-bottom: 0.025rem;
}
.c3d2con3{
    font-size: 0.065rem;
    color: #9c9ca4;
}
.c3d2con3 span{
    font-size: 0.08rem;
    color: #f72d69;
    font-weight: bold;
}
.c3d2con4{
    font-size: 0.075rem;
    position: absolute;
    bottom: -0.15rem;right: 0;
    width: 0.41rem;height: 0.175rem;line-height: 0.175rem;text-align: center;
    background: #ff3195;
    color: #fff;
    border-radius: 0.085rem 0.085rem 0.085rem 0;
}
</style>
